<template>
	<view class="order-card card">
		<!-- 上部分 - 店铺、状态 -->
		<view class="card-top">
			<view class="card-top-left">
				<view class="card-top-left-logo1"><i-icon icon="icondianpu" type="single" size="32rpx" color="rgb(255,225,60)"></i-icon></view>
				<view class="card-top-left-title">{{ orderData.store_sell_name }}</view>
				<view class="card-top-left-logo2"><i-icon icon="iconbao_1" type="single" size="32rpx" color="rgb(251,176,0)"></i-icon></view>
			</view>
			<view class="card-top-right">{{ orderData.status | orderStatus }}</view>
		</view>

		<!-- 中间部分 - 商品信息 -->
		<view class="card-middle" @click="toDetailPage(orderData)">
			<view class="card-middle-content flex">
				<view class="card-middle-content__img"><image :src="orderData.car_supplies_pic_path"></image></view>
				<view class="card-middle-content__title">{{ orderData.car_supplies_name }}</view>
				<view class="card-middle-content__price">
					<view class="card-middle-content__price-yuan">￥{{ orderData.price }}</view>
					<view class="card-middle-content__price-nums">×{{ orderData.count }}</view>
				</view>
			</view>
			<view class="card-middle-describe flex flex-ai-fe flex-jc-fe">
				<view class="card-middle-describe__total">
					总价：
					<text class="card-middle-describe__total-yuan">￥{{ orderData.total_money }}</text>
				</view>
				<!-- 订单状态不是待付款就需要显示运费 -->
				<view class="card-middle-describe__total" v-if="orderData.status !== 1">
					运费：
					<text class="card-middle-describe__total-yuan">￥{{ orderData.freight }}</text>
				</view>
				<view class="card-middle-describe__actual">
					实付款：
					<text class="card-middle-describe__actual-yuan">￥{{ orderData.total_money }}</text>
				</view>
			</view>
		</view>


   <!-- 当从聊天界面进入订单页面 按钮显示为发送 -->
	 <view class="card-bottom" v-if="goInPage==='msg'">
	 	<view class="card-bottom-operate" >
	 		<view class="card-bottom-operate__btn" @click="contactSeller"><text>发送</text></view>
	 	</view>
	 </view>
	 <view class="" v-else>
	 	
	 
		<!-- type为0时(我销售的)显示 下部分 - 按钮 //0待付款,1待发货,2待收货,3已完成 -->
		<view class="card-bottom" v-if="type === 0">
			<view class="" v-if="orderData.status === 1">
				<view class="card-bottom-resettime__title">剩余付款时间：</view>
				<u-count-down
					class="card-bottom-resettime__time"
					:show-days="false"
					:class="{ 'wrap-time': orderData.status === 1 }"
					color="#333"
					font-size="26"
					@end="countDownEnd"
					:timestamp="orderData.surplustime || 86400"
				></u-count-down>
			</view>

			<view class="card-bottom-operate" v-if="orderData.status === 1 || orderData.status === 3 || orderData.status === 4">
				<view class="card-bottom-operate__btn" style="background-color: #ffffff; border: 2rpx solid #d0d0d0" @click="delOrder()" v-if="orderData.status === 4">
					<text>删除订单</text>
				</view>
				<!-- 分割线 -->
				<view class="card-bottom-operate__btn" @click="contactSeller">
					<i-icon icon="iconxiaoxi" type="single" size="28rpx"></i-icon>
					<text>联系买家</text>
				</view>
				<view class="card-bottom-operate__btn" @click="callPhone(orderData.store_sell_phone)">
					<i-icon icon="iconlianxi" type="single" size="28rpx"></i-icon>
					<text class="ml-10">致电买家</text>
				</view>
			</view>
			<!-- 待发货 -->
			<view class="card-bottom-operate" v-if="orderData.status === 2">
				<view class="card-bottom-operate__btn" @click="contactSeller">
					<i-icon icon="iconxiaoxi" type="single" size="28rpx"></i-icon>
					<text class="ml-10">联系买家</text>
				</view>
				<view class="card-bottom-operate__btn luru" @click="toDetailPage(orderData)">
					<i-icon icon="iconwuliu" type="single" size="28rpx"></i-icon>
					<text class="ml-10">录入物流信息</text>
				</view>
			</view>
		</view>

		<!-- type为1时(我购买的)显示 下部分 - 按钮 //0待付款,1待发货,2待收货,3已完成 -->
		<view class="card-bottom" v-if="type === 1">
			<!-- 待付款 -->
			<view class="card-bottom-resettime flex-jc-sb" style="flex: 1" v-if="orderData.status === 1">
				<view class="flex flex-ai-c">
					<view class="card-bottom-resettime__title">剩余付款时间：</view>
					<u-count-down
						class="card-bottom-resettime__time"
						:show-days="false"
						:class="{ 'wrap-time': orderData.status === 1 }"
						color="#333"
						font-size="26"
						@end="countDownEnd"
						:timestamp="orderData.surplustime || 86400"
					></u-count-down>
				</view>
				<view class="card-bottom-operate__btn" @click="goPay()"><text>去付款</text></view>
			</view>

			<!-- 待发货 -->
			<view class="card-bottom-operate" v-if="orderData.status === 2">
				<view class="card-bottom-operate__btn" @click="contactSeller">
					<i-icon icon="iconxiaoxi" type="single" size="28rpx"></i-icon>
					<text class="ml-10">联系商家</text>
				</view>
				<view class="card-bottom-operate__btn" @click="callPhone(orderData.receiver_phone)">
					<i-icon icon="iconlianxi" type="single" size="28rpx"></i-icon>
					<text class="ml-10">致电商家</text>
				</view>
			</view>

			<!-- 待收货 -->
			<view class="card-bottom-operate" v-if="orderData.status === 3">
				<view class="card-bottom-operate__btn" @click="confirmReceived()"><text>确认收货</text></view>
			</view>

			<!-- 已完成 -->
			<view class="card-bottom-operate" v-if="orderData.status === 4">
				<view style="background: #ffffff; border: 2rpx solid #d0d0d0" class="card-bottom-operate__btn" @click="delOrder()"><text>删除订单</text></view>

				<view class="card-bottom-operate__btn" @click="addToBuyCar()"><text>加入购物车</text></view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue';

export default {
	components: { iButton },
	props: {
		orderData: {
			type: Object,
			default: () => ({})
		},
		// 订单类型，0：我销售的，1：我购买的
		type: {
			type: Number,
			default: 0
		},
		goInPage: {
			type: String,
			default: ''
		}
	},

	data() {
		return {};
	},

	filters: {
		// 过滤订单状态的数字，返回状态文字
		orderStatus(status) {
			let statusList = [null, '待付款', '待发货', '待收货', '已完成'];
			return statusList[status];
		}
	},

	methods: {
		// 跳转到详情页面
		toDetailPage(itemData) {
			// 跳转到详情，0：我销售的，1：我购买的
			let urls = {
				0: '/pages_order/carGoodsOrder/salesOrderDetail/salesOrderDetail',
				1: '/pages_order/carGoodsOrder/buyOrderDetail/buyOrderDetail'
			};
			uni.navigateTo({
				url: `${urls[this.type]}?id=${itemData.id}`,
				fail: err => {
					console.log(err);
				}
			});
		},

		// 致电买家或商家
		callPhone(num) {
			uni.makePhoneCall({
				phoneNumber: num + ''
			});
		},

		//联系 type 0 联系买家 1 联系商家
		contactSeller() {
			this.$store.commit('news/setCardInfo', {
				imgSrc: this.orderData.car_supplies_pic_path,
				name: this.orderData.car_supplies_name,
				price: this.orderData.total_money,
				type: 'carGoods'
			});
			
			if(this.goInPage==='msg'){
				this.$store.commit('news/backRoom', {
				  backFlag: true,
				  tab: this.type,
				})
				uni.navigateBack({
				  delta: 1,
				})
			}else{
				const storeId = this.type ? this.orderData.store_sell_id : this.orderData.store_buy_id;
				const storeName = this.type ? this.orderData.store_sell_name : this.orderData.store_buy_name;
				const storeImg = this.type ? this.orderData.store_sell_topimg : this.orderData.store_buy_topimg;
				this.$store.commit('news/createConversationActive', {
					user: storeName, //店铺名称
					img: storeImg, //店铺头像
					lastTime: '', //
					userId: storeId, //店铺id
					conversationID: 'C2C' + storeId
				});
				
				uni.navigateTo({
					url: '/pages_news/contactSeller/contactSeller?user=' + storeName + '&pageId=' + this.orderData.id + '&tab=' + this.type
				});
			}

			
	
		},

		countDownEnd() {},

		// 去付款
		goPay() {
			uni.navigateTo({
				url: `/pages_order/pay/pay?price=${this.orderData.price}&orderNo=${this.orderData.id}&type=carGoods&isOrderlist=1`
			});
		},

		// 点击确认收货
		async confirmReceived() {
			uni.showLoading();
			try {
				const { data } = await this.$api.carGoodsOrder.OrderCarSuppliesDetails(this.orderData.id);
				let param = {
					id: this.orderData.id,
					storeid: this.$store.state.userInfoDetail.store.storeId,
					type: 1,
					name: data.logistics_company_name,
					number: data.logistics_no
				};
				const res = await this.$api.carGoodsOrder.OrderCarSuppliesOperate(param);
				console.log('车品订单收货', res);
				// 返回到订单列表页面
				uni.showToast({ title: '收货成功' });
				let t = setTimeout(() => {
					clearTimeout(t);
					this.$emit('updateStatus', 4);
				}, 1000);
			} catch (err) {
				console.log(err);
			}
			uni.hideLoading();
		},

		// 加入购物车
		async addToBuyCar() {
			let data = {
				buyer_store_id: uni.getStorageSync('userInfoDetail').store.storeId, // 当前用户storeid
				store_id: this.orderData.store_sell_id, // 商品所属店铺id
				car_supplies_id: this.orderData.id,
				count: this.orderData.count
			};
			console.log(data);
			uni.showLoading();
			try {
				const res = await this.$api.buyCar.AddShoppingTrolley(data);
				console.log(res);
				uni.showToast({ title: '已添加到购物车' });
			} catch (err) {}
			uni.hideLoading();
		},

		// 删除订单
		delOrder() {
			uni.showModal({
				title: '确认删除订单？',
				// content: '删除后不可恢复',
				success: async res => {
					if (res.confirm) {
						try {
							uni.showLoading();
							const res = await this.$api.carGoodsOrder.OrderCarSuppliesOperate({
								id: this.orderData.id,
								storeid: this.$store.state.userInfoDetail.store.storeId,
								type: 2
							});
							uni.hideLoading();
							uni.showToast({ title: '删除订单成功', icon: 'none' });
							this.$emit('updateStatus');
						} catch (err) {}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.card {
	width: 100%;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(10, 10, 10, 0.1);
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	border-top: 2rpx solid #f6f6f6;

	&-top {
		display: flex;
		height: 72rpx;
		justify-content: space-between;

		&-left {
			display: flex;
			align-items: center;
			height: 100%;

			&-logo1,
			&-logo2 {
				width: 32rpx;
				height: 32rpx;

				& > image {
					width: 100%;
					height: 100%;
				}
			}

			&-title {
				max-width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			&-logo1 {
				margin: 0 16rpx 0 24rpx;
			}

			&-logo2 {
				margin-left: 14rpx;
			}
		}

		&-right {
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #eb5c02;
			padding-right: 25rpx;
			box-sizing: border-box;
		}
	}

	&-middle {
		padding: 24rpx;
		border-top: 2rpx solid #f6f6f6;

		&-content {
			&__img {
				width: 130rpx;
				height: 130rpx;
				border-radius: 6rpx;
				overflow: hidden;
				flex-shrink: 0;

				& > image {
					width: 100%;
					height: 100%;
				}
			}

			&__title {
				font-size: 26rpx;
				margin: 0 35rpx 0 16rpx;
				font-weight: 500;
				color: #343434;
				transform: translateY(-8rpx);
				line-height: 44rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			&__price {
				flex: 1;
				text-align: right;
				font-weight: 500;

				&-yuan {
					color: #343434;
					font-size: 24rpx;
				}

				&-nums {
					font-size: 26rpx;
					color: #9a9a9a;
					text-align: right;
				}
			}
		}

		&-describe {
			margin-top: 40rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #9a9a9a;

			&__total {
				margin-right: 25rpx;
				color: #999;

				&-yuan {
					color: #333;
					fong-weight: 500;
				}
			}

			&__actual {
				&-yuan {
					color: #eb5c02;
					font-weight: bold;
				}
			}
		}
	}

	&-bottom {
		display: flex;
		height: 97rpx;
		align-items: center;
		padding: 0 24rpx 0 25rpx;
		box-sizing: border-box;

		&-resettime {
			font-size: 26rpx;
			font-weight: 500;
			display: flex;
			flex-wrap: wrap;

			&__title {
				color: #999999;
			}

			&__time {
				color: #333333;

				&.wrap-time {
					margin-left: 10rpx;
				}
			}
		}

		&-operate {
			display: flex;
			justify-content: flex-end;
			flex: 1;

			&__btn {
				height: 60rpx;
				padding: 0 28rpx;
				background: linear-gradient(-90deg, #fbd220, #ffe23e);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				margin-right: 32rpx;

				&:last-child {
					margin-right: 0;
				}

				&.luru {
					width: 268rpx;
					height: 60rpx;
				}

				& > image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
